<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>openBSE Demo</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="https://openbse.netlify.app/openbse.all.min.js"></script>
    <script src="stats.js"></script>
    <script src="https://hls-js.netlify.com/dist/hls.min.js"></script>
    <script src="contextmenu.js"></script>
    <script src="openBSEDemo.js"></script>
</head>

<body>
    <header class="header">
        <h1 class="header-title">openBSE</h1>
        <h2 class="header-subtitle">高性能 JavaScript 弹幕引擎</h2>
        <a href="https://github.com/iamscottxu/openBSE" target="_blank" class="header-badge">
            <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/iamscottxu/openBSE?style=social">
        </a>
        <a href="https://gitee.com/scott-xu/openBSE" target="_blank" class="header-badge">
            <img alt="Gitee Repo stars"src="https://img.shields.io/badge/dynamic/json?label=Gitee&query=%24.stargazers_count&url=https%3A%2F%2Fgitee.com%2Fapi%2Fv5%2Frepos%2Fscott-xu%2FopenBSE&style=social"></img>
        </a>
        <a href="https://www.npmjs.com/package/openbse" target="_blank" class="header-badge">
            <img alt="npm" src="https://img.shields.io/npm/v/openbse?style=flat-square">
        </a>
        <a href="https://github.com/iamscottxu/openBSE/blob/master/LICENSE" target="_blank" class="header-badge">
            <img alt="GitHub" src="https://img.shields.io/github/license/iamscottxu/openBSE?style=flat-square">
        </a>
    </header>
    <main>
        <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
        <div class="stage" id="stage">
            <canvas class="stage-el" id="videoCanvas"></canvas>
            <div class="stage-el" id="BulletScreensDiv"></div>
            <div class="debug-info" id="debug_info" style="display:none;">
                <div class="close" id="debug_info_close">[x]</div>
                <div class="text">Time: <b id="time"></b>ms</div>
                <div class="text">Delay Bullet-Screen Count: <b id="delayBulletScreenCount"></b></div>
                <div class="text">Buffer Bullet-Screen Count: <b id="bufferBulletScreenCount"></b></div>
                <div class="chart" id="fps"></div>
                <div class="chart" id="delay"></div>
                <div class="chart" id="realTimeBulletScreenCount"></div>
            </div>
        </div>
        <p><input type="text" style="width:500px;" id="BulletScreenText">&nbsp;<a href="javascript:void(0)"
                onclick="sendBulletScreen();">发送</a></p>
        <p>
            渲染模式：
        <form id="renderModes" onclick="setRenderModes();">
            <input type="radio" value="canvas" name="renderModes">Canvas&nbsp;
            <input type="radio" value="css3" name="renderModes">CSS3&nbsp;
            <input type="radio" value="webgl" name="renderModes">WebGL&nbsp;
            <input type="radio" value="svg" name="renderModes">SVG&nbsp;
        </form>
        </p>
        <p>
            隐藏弹幕：
        <form id="hiddenTypes" onclick="sethiddenTypes();">
            <input type="checkbox" value="1" name="hiddenTypes">普通&nbsp;
            <input type="checkbox" value="2" name="hiddenTypes">逆向&nbsp;
            <input type="checkbox" value="4" name="hiddenTypes">顶部&nbsp;
            <input type="checkbox" value="8" name="hiddenTypes">底部&nbsp;
        </form>
        </p>
        <p>上次单击的弹幕内容：<b id="clickText">无</b></p>
        <a href="javascript:void(0)" onclick="videoElement.play();">开始</a>&nbsp;<a href="javascript:void(0)"
            onclick="videoElement.pause();">暂停</a>
        <!--&nbsp;<a href="javascript:void(0)"
        onclick="generalEngine.stop();">停止</a>&nbsp;-->
        <a href="javascript:void(0)" onclick="generalEngine.visibility = true;">显示弹幕</a>&nbsp;<a
            href="javascript:void(0)" onclick="generalEngine.visibility = false;">隐藏弹幕</a>&nbsp;
        <a href="javascript:void(0)" onclick="generalEngine.cleanBuffer();loadData(generalEngine);">重新加载弹幕</a>&nbsp;<a
            href="javascript:void(0)" onclick="generalEngine.cleanScreen();">清空屏幕</a>&nbsp;<br>
        <a href="javascript:void(0)" onclick="set('playSpeed', 1);">1倍速</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('playSpeed', 1.5);">1.5倍数</a>&nbsp;
        <a href="javascript:void(0)" onclick="set('playSpeed', 2);">2倍速</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('playSpeed', 2.5);">2.5倍数</a>&nbsp;
        <a href="javascript:void(0)" onclick="set('scaling', 1);">1倍缩放</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('scaling', 1.5);">1.5倍缩放</a>&nbsp;
        <a href="javascript:void(0)" onclick="set('scaling', 2);">2倍缩放</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('scaling', 0.75);">0.75倍缩放</a>&nbsp;<br>
        <a href="javascript:void(0)" onclick="set('opacity', 0);">100%透明</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('opacity', 0.25);">75%透明</a>&nbsp;
        <a href="javascript:void(0)" onclick="set('opacity', 0.5);">50%透明</a>&nbsp;<a href="javascript:void(0)"
            onclick="set('opacity', 0.75);">25%透明</a>&nbsp;
        <a href="javascript:void(0)" onclick="set('opacity', 1);">不透明</a>
        <div class="contextmenu" id="bullet_screen_contextmenu" style="display:none;">
            <div class="item canselect">举报</div>
            <div class="item canselect">举报并屏蔽</div>
            <div class="item canselect">复制</div>
        </div>
        <div class="contextmenu" id="stage_contextmenu" style="display:none;">
            <div class="item">openBSE v<b id="contextmenu_item_version"></b></div>
            <div class="item canselect" id="contextmenu_item_debug_info">弹幕详细统计信息</div>
        </div>
    </main>
</body>

</html>